<template>
	<div>
		<Table 
			border 
            :height="data.height"
			:loading="data.isLoading" 
			:columns="columns" 
			:data="data.data">
		</Table>
		<div class="pagePanel" v-show="data.data.length > 0">
			<Page
			show-sizer 
			show-total
			show-elevator
			placement="top"
			:total="data.page.totalSize" 
			:page-size="data.page.pagesize" 
			:current="data.page.currentPage + 1" 
			:page-size-opts="[20, 40, 60, 80, 100]"
			@on-change="changePage"
			@on-page-size-change="changePageSize"></Page>
		</div>
	</div>
</template>

<script>
import {formatTimestamp, formatHoursMin, formatsec} from '@/common/js/date_util.js'
export default {
	props: ['data'],
	data () {
		return {
            reserveInfoColumns: [
                {
                    title: '预定编号',
                    key: 'bookingCode',
                    align: 'center',
                    width: 120
                },
                {
                    title: '预定时间',
                    key: 'createTime',
                    align: 'center',
                    width: 160,
                    render: (h, params) => {
                        return params.row.createTime != null? formatTimestamp(params.row.createTime) : '-/-'
                    }
                },
                {
                    title: '预定影厅',
                    key: 'roomName',
                    align: 'center',
                    width: 120
                },
                {
                    title: '预定开始时间',
                    key: 'startTime',
                    align: 'center',
                    width: 160,
                    render: (h, params) => {
                        return params.row.startTime != null? formatTimestamp(params.row.startTime) : '-/-'
                    }
                },
                {
                    title: '预定结束时间',
                    key: 'endTime',
                    align: 'center',
                    width: 160,
                    render: (h, params) => {
                        return params.row.endTime != null? formatTimestamp(params.row.endTime) : '-/-'
                    }
                },
                {
                    title: '预定时长',
                    key: 'bookHour',
                    align: 'center',
                    width: 100
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center',
                    width: 100
                },
                {
                    title: '手机号',
                    key: 'phoneNum',
                    align: 'center',
                    width: 120
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        return params.row. status == 0? '预定': params.row.status == 1? '取消': params.row.status == 2? '过期': '-/-'
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        let open = h('Button', {
                            props: {
                                type: 'primary'
                            },
                            style: {
                                marginRight: '.05rem'
                            },
                            on: {
                                click: () => {
                                    this.$emit('on-action', 'open', params);
                                }
                            }
                        }, '开厅');
                        let cancel = h('Button', {
                            props: {
                                type: 'primary'
                            },
                            style: {
                                marginRight: '.05rem'
                            },
                            on: {
                                click: () => {
                                    this.$emit('on-action', 'cancel', params);
                                }
                            }
                        }, '取消');
                        let status = params.row.status;
                        if (status == 0) {
                            return h('div', [open, cancel]);
                        } else if (status == 1) {
                            return '-/-'
                        } else if (status == 2) {
                            return '-/-'                                
                        }
                    }
                }
            ],
            reserveColumns: [
                {
                    title: '影厅名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '可预定时间段',
                    align: 'center',
                    key: 'bookingTimes',
                    render: (h, params) => {
                        let bookingTimes = JSON.parse('[' + params.row.bookingTimes + ']');
                        let status = params.row.status;
                        let startTime = params.row.startTime;
                        let endTime = params.row.endTime;
                        let ntime = new Date().getTime() / 1000;
                        let text = '';
                        let temp = '';
                        bookingTimes.map((item, index) => {
                            if (item != null) {
                                temp += item.btime + ' , ' + item.etime + ' - ';
                            }
                        })
                        text = '00:00:00 - ' + temp + '23:59:59'
                        if (endTime > ntime) {
                            if (status == 3) {
                                let stime = formatHoursMin(startTime);
                                let etime = formatHoursMin(endTime);
                                if (formatsec(formatHoursMin(endTime)) < 0) {
                                    text = '00:00:00 - ' + stime
                                } else {
                                    text = '00:00:00 - ' + stime + ' , ' + etime + ' - 23:59:59'
                                }
                            }
                        }
                        return text
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        let reserve = h('Button', {
                            props: {
                                type: 'primary'
                            },
                            on: {
                                click: () => {
                                    this.$emit('on-action', params);
                                }
                            }
                        }, '预定');
                        return h('div', [reserve]);
                    }
                }
            ],
        }
	},
	computed: {
		columns() {
			let data = this.data;
			let columns;
			if (data.listType == 'reserveInfo') {
				columns = this.reserveInfoColumns;
			} else if (data.listType == 'reserve') {
                columns = this.reserveColumns;
            }
			return columns;
		}
	},
	methods: {
		changePage(page) {
			this.$emit('on-change-page', this.data.listType, page);
		},
		changePageSize(pageSize) {
			this.$emit('on-change-pageSize', this.data.listType, pageSize);
		}
	}
}
</script>

<style scoped lang="less">
.view {
	.pagePanel {
		margin-top: 20px;
        text-align: center;
        
	}
}
</style>